import { useState, useEffect } from 'react';
import { Form, Input, Button, message } from 'antd';
import styles from './index.less';
import { history } from 'umi';

const Index = ()=>{
    // 表单验证通过
    const onFinish = (values: any) => {
        const { username, password } = values;
        if(username !== 'admin' || password !== '123456'){
            return message.info('账号或密码错误');
        }
        window.localStorage.setItem('token','6bc11a587da6c2c60d69');
        history.push('/Home');
    };

    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className={ styles.box }>
            <div className={ styles.boxFrom }>
                <div className={ styles.title }>微前端-qiankun-基座</div>
                <Form
                    name="basic"
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                    >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入账号!' }]}
                    >
                        <Input />
                    </Form.Item>
                
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
export default Index;